<template>
  <div class="trading-area">
    <div class="container-1200">
      <!-- :build="buildList[0]" -->
      <Title v-if="build" :titleStr="build.name"></Title>
      <Overview :build="build" />
      <Title titleStr="在租房源"></Title>
      <HousingList :buildList="buildList" />
    </div>
    <HouseList :build_id="id" type="list" />
  </div>
</template>

<script>
import Title from '@/components/Title'
import HousingList from '@/components/HousingList'
import Overview from '@/components/Overview'
import HouseList from '@/components/HouseList'
import { getApiBuildInfo, getApiBuildList } from '@/api'

export default {
  components: {
    Overview,
    HousingList,
    Title,
    HouseList,
  },
  data() {
    return {
      id: null,
      build: null,
      buildList: [],
    }
  },
  created() {
    this.id = this.$route.params.id
    this.getBuildInfo(this.id)
    this.getBuildList()
  },
  methods: {
    getBuildInfo(id) {
      getApiBuildInfo({ id }).then((res) => {
        console.log('res: ', res)
        if (res.code === 200) {
          this.build = res.data
        }
      })
    },
    getBuildList() {
      getApiBuildList().then((res) => {
        if (res.code === 200) {
          this.buildList = [
            res.data.list[0],
            res.data.list[1],
            res.data.list[2],
            res.data.list[3],
            res.data.list[4],
          ]
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
.trading-area {
  padding-top: 24px;
}
</style>
